<script setup lang="ts">
import { Question } from '@/api/subject/type';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ChoiceQuestion from './components/ChoiceQuestion.vue';
import JudgeQuestion from './components/JudgeQuestion.vue';
import BlankQuestion from './components/BlankQuestion.vue';
import EssayQuestion from './components/EssayQuestion.vue';
import { createQuestion } from '@/api/subject';
import { showToast } from 'vant';
import { Result } from '@/utils/request';

const subjectId = ref('');
const isSubmitting = ref(false);
const subjectName = ref('');
const router = useRouter();
const route = useRoute();
const activeTab = ref(0);

onMounted(() => {
    const id = route.query.id;
    const name = route.query.name;
    
    if (!Array.isArray(id)) {
        subjectId.value = id as string;
    }
    
    if (!Array.isArray(name)) {
        subjectName.value = name as string;
    }
});

const submit = (question: Question) => {
    if (isSubmitting.value) return;
    
    isSubmitting.value = true;
    createQuestion(subjectId.value, question).then((res) => {
        const {msg} = res as Result;
        showToast(msg);
        router.push({
            name: 'QuestionManage',
            query: {
                id: subjectId.value
            }
        });
    }).finally(() => {
        isSubmitting.value = false;
    });
}

const handleBack = () => {
    router.push({
        name: 'QuestionManage',
        query: {
            id: subjectId.value
        }
    });
}

const questionTypes = [
    { name: '选择题', value: 'choice', component: ChoiceQuestion },
    { name: '判断题', value: 'judge', component: JudgeQuestion },
    { name: '填空题', value: 'blank', component: BlankQuestion },
    { name: '简答题', value: 'essay', component: EssayQuestion }
];
</script>

<template>
    <div class="create-question-page">
        <div class="page-header">
            <div class="back-action" @click="handleBack">
                <van-icon name="arrow-left" />
                <span>返回题目管理</span>
            </div>
            <h1 class="page-title">创建题目</h1>
            <p class="page-subtitle" v-if="subjectName">题目集: {{ subjectName }}</p>
        </div>
        
        <div class="question-form-container">
            <div class="tab-container">
                <van-tabs v-model:active="activeTab" sticky animated swipeable>
                    <van-tab 
                        v-for="(type, index) in questionTypes" 
                        :key="type.value" 
                        :title="type.name"
                    >
                        <component 
                            :is="type.component" 
                            @submit="submit" 
                            :disabled="isSubmitting"
                        />
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.create-question-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    
    .page-header {
        margin-bottom: 24px;
        
        .back-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #606266;
            cursor: pointer;
            padding: 8px 0;
            font-size: 14px;
            margin-bottom: 8px;
            
            &:hover {
                color: #409eff;
            }
        }
        
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #303133;
            margin: 0 0 8px 0;
        }
        
        .page-subtitle {
            font-size: 14px;
            color: #606266;
            margin: 0;
        }
    }
    
    .question-form-container {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        
        .tab-container {
            :deep(.van-tabs__wrap) {
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                
                .van-tab {
                    font-size: 16px;
                    padding: 0 24px;
                    
                    &--active {
                        font-weight: 500;
                    }
                }
            }
            
            :deep(.van-tabs__content) {
                padding: 24px;
            }
        }
    }
}
</style>